<!DOCTYPE html>
<html th:lang="${#locale.language}"
  th:dir="#{language.direction}"
  th:data-language="${#locale.toString()}"
  xmlns:th="https://www.thymeleaf.org">

  <head>
    <th:block th:insert="~{fragments/common :: head(title=#{extractAttachments.title}, header=#{extractAttachments.header})}">
    </th:block>
  </head>

  <body>
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6 bg-card">
              <div class="tool-header">
                <span class="material-symbols-rounded tool-header-icon other">folder_zip</span>
                <span class="tool-header-text"
                  th:text="#{extractAttachments.header}"></span>
              </div>

              <p class="tool-description"
                th:text="#{extractAttachments.description}"></p>

              <form action="#"
                th:action="@{/api/v1/misc/extract-attachments}"
                method="post"
                enctype="multipart/form-data">
                <!-- PDF file selector -->
                <div
                  th:replace="~{fragments/common :: fileSelector(name='fileInput', disableMultipleFiles=true, multipleInputsForSingleRequest=false, accept='application/pdf')}">
                </div>

                <!-- Submit button -->
                <button type="submit"
                  id="submitBtn"
                  class="btn btn-primary"
                  th:text="#{extractAttachments.downloadButton}">Extract Attachments</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>

</html>